import { Alert, Button, InputNumber, Space, Image, Badge, Modal, Form, Input, Table, App } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { useModel, history, useSearchParams } from '@umijs/max'
import { DownloadOutlined, MoneyCollectOutlined } from '@ant-design/icons'
import './OrderSettlement.less'

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 }
}

const OrderSettlement = () => {
  const { GetOrderList } = useModel('PlatformData')
  const { GetPartnerAssocPlat } = useModel('OrderSettlement')

  const { message } = App.useApp()

  const tableRef = useRef()

  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const [pageSize, setPageSize] = useState(10) //  每页数量

  const [amountTotal, setAmountTotal] = useState({}) // 交易金额总计

  const [platformList, setPlatformList] = useState([]) // 平台列表

  // 获取平台名称
  const getPlatformList = async () => {
    const res = await GetPartnerAssocPlat()

    let transformedData = res.reduce((acc, item) => {
      acc[item.id] = item.name
      return acc
    }, {})

    setPlatformList(transformedData)
  }

  const originColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      hideInSearch: true
    },
    {
      title: '平台名称',
      dataIndex: 'platform_name',
      valueEnum: platformList,
      valueType: 'select',
      fieldProps: {
        mode: 'multiple'
      }
    },
    {
      title: '订单编号',
      dataIndex: 'order_sn'
    },
    {
      title: '商品信息',
      dataIndex: 'goods_name',
      width: 280,
      render: (text, record) => (
        <Space>
          <Image width={72} src={record.goods_pic} />
          <div>
            <div>{text}</div>
            <span>规格：{record.attr_value}</span>
          </div>
        </Space>
      )
    },
    {
      title: '下单人',
      dataIndex: 'cert_name',
      hideInSearch: true
    },
    {
      title: '下单手机号',
      dataIndex: 'tel',
      hideInSearch: true
    },
    {
      title: '订单状态',
      dataIndex: 'status_desc',
      hideInSearch: true
    },
    {
      title: '订单创建时间',
      dataIndex: 'created_at',
      hideInSearch: true,
    },
    {
      title: '订单创建时间',
      dataIndex: 'created_at',
      hideInTable: true,
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            created_at_start: value[0],
            created_at_end: value[1]
          }
        }
      }
    },
    {
      title: '订单总价(元)',
      dataIndex: 'order_amount',
      hideInSearch: true
    },
    {
      title: '结算方式',
      hideInSearch: true,
      render: (text, record) => {
        return <>订单成交结算</>
      }
    },
    {
      title: '结算比例',
      dataIndex: 'order_rate',
      hideInSearch: true
    },
    {
      title: '结算金额(元)',
      dataIndex: 'settle_amount',
      hideInSearch: true
    },
    {
      title: '流水号',
      dataIndex: 'out_trade_no'
    },
    {
      title: '结算时间',
      dataIndex: 'settlement_time',
      hideInSearch: true,
    },
    {
      title: '结算时间',
      dataIndex: 'settlement_time',
      hideInTable: true,
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            settlement_time_start: value[0],
            settlement_time_end: value[1]
          }
        }
      }
    }
  ]

  return (
    <ProTable
      scroll={{ x: 'max-content' }}
      actionRef={tableRef}
      request={async params => {
        const param = {
          per_page: params.pageSize,
          page: params.current,
          order_sn: params.order_sn,
          created_at_start: params.created_at_start,
          created_at_end: params.created_at_end,
          settlement_time_start: params.settlement_time_start,
          settlement_time_end: params.settlement_time_end,
          out_trade_no: params.out_trade_no,
          goods_name: params.goods_name,
          platform_id: (params.platform_name && params.platform_name.join(',')) || ''
        }

        const res = await GetOrderList(param)

        const { data, total, bottom_total_order_amount, bottom_total_settle_amount } = res

        setAmountTotal({
          bottom_total_order_amount,
          bottom_total_settle_amount
        })

        setCurrentPage(params.current)
        setPageSize(params.pageSize)

        await getPlatformList()

        return {
          data: data,
          success: true,
          total: total
        }
      }}
      pagination={{
        pageSize: pageSize,
        current: currentPage
      }}
      rowKey='id'
      columns={originColumns}
      search={{
        defaultCollapsed: false,
        labelWidth: 100,
        span: 8
      }}
      summary={pageData => {
        return (
          <Table.Summary.Row>
            {originColumns.map((item, index) => {
              return (
                <Table.Summary.Cell index={index} key={index}>
                  <div className='summary_cell'>
                    {index === 0 && <div className='summary_cell_item'>条件统计</div>}
                    {index === 8 && <div className='summary_cell_item'>{amountTotal.bottom_total_order_amount}</div>}
                    {index === 11 && <div className='summary_cell_item'>{amountTotal.bottom_total_settle_amount}</div>}
                  </div>
                </Table.Summary.Cell>
              )
            })}
          </Table.Summary.Row>
        )
      }}
    />
  )
}
export default OrderSettlement
